<template>
	<view>
		<uni-section class="m-b-10" title="新增报账类型" type="line"></uni-section>
		<view class="p-l-20 p-r-20 flex ">
			<input class="input flex-1 h-70 m-r-20 br p-l-20 p-r-20 bgc-ee c-ee" v-model.trim="value" placeholder="请输入类型名" />
			<button class="btn bgc-blue w-120 br-0 lh-70 f-24" @click="addType">添加</button>
		</view>
		<uni-section class="mb-10 m-t-40" title="已有报账类型" sub-title="点击类型可删除" type="line"></uni-section>
		<uni-grid :column="3" :square='false' :showBorder='false' :highlight='false'>
			<uni-grid-item v-for="(item,index) in list" :key="index">
				<uni-tag :text="item.type" class='p-t-15 p-b-15' stype="primary" @click="gridChange(item,index)"></uni-tag>
			</uni-grid-item>
		</uni-grid>
		
		<!-- 缺省 -->
		<pinapp-empty-page v-if="list.length==0"></pinapp-empty-page>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value: '',
				list:[]
			}
		},
		onLoad() {
			this.$http.get('/type').then(res=>{
				this.list = res.data
			})
		},
		methods:{
			addType(e){
				if(this.value.trim()==='') return uni.showToast({
					title:'请输入类型名称',
					icon:'none'
				})
				this.$http.post('/type/add',{
					type:this.value
				}).then(res=>{
					this.value = ''
					this.list.unshift(res.data)
					uni.showToast({
					   title:'新增成功'
					})
				})
			},
			gridChange(item,index){
				let that = this
				uni.showModal({
					title:'提示',
					content:`是否确认删除${item.type}`,
					success(e){
						if(e.confirm){
						   that.$http.post('/type/delete',{
							   id:item.id
						   }).then(res=>{
							   
							   uni.showToast({
							   	title:'删除成功'
							   })
							   that.list.splice(index,1)
							   
						   })
						}
					}
				})
			}
		}
	}
</script>

<style>
	page {
		background-color: white;
		height: 100%;
	}
</style>
<style lang="scss" scoped>
	.input {
		color: #000;
	}

	.uni-grid-item {
		text-align: center;
		padding: 20upx;
		position: relative !important;
	}
</style>
